/* 项目库 */
<template>
  <div>
    <card>
      <p slot="title">
        项目库
      </p>
      <Row>
        <Col style="border:1px #e8eaec solid;text-align: center;padding:5px 0" span="4">总计</Col>
        <Col style="border:1px #e8eaec solid;text-align: center;padding:5px 0" span="4">{{mapList.reportNum}}个报告书{{mapList.reportTableNum}}个报告表</Col>
        <Col style="border:1px #e8eaec solid;text-align: center;padding:5px 0" span="4">绩效{{mapList.contractAmount}}</Col>
        <Col span="12">
        <Input search enter-button="搜索" style="float: right;width: 50%" v-model="searchProject" @on-search="findProject">
        </Input>
        </Col>
      </Row>
      <Table border :columns="columns1" :data="projectList" style="margin-top: 10px" :loading="projectListLoading"></Table>
      <Row style="padding:10px 0">
        <Col span="24">
        <Page style="float:right" :total="mapList.proNum" show-total @on-change="handlePage" />
        </Col>
      </Row>
      <Card>
        <p slot="title">
          地图统计
        </p>
        <Row :gutter="16">
          <Col span="12">
          <div id="allmap">
            <google-map map-type-id="hybrid" :center="center" :zoom="zoomDefault" ref="mapRef" style=" height: 500px;">
              <map-marker :position="m.position" :opacity="m.opacity" :clickable='true' @click="mapModal(m.id)" v-for="(m,index) in markers"
                :key="index">
              </map-marker>
            </google-map>
          </div>
          </Col>
          <Col span="12">
          <Form label-position="left" :label-width="100">
            <FormItem label="报告类型：" style="padding-bottom: 20px;">
              <RadioGroup v-model="queryReportType" type="button" @on-change="changeQueryReportType">
                <Radio label="全部"></Radio>
                <Radio label="报告表"></Radio>
                <Radio label="报告书"></Radio>
                <Radio label="现状评估报告"></Radio>
                <Radio label="规划"></Radio>
                <Radio label="验收"></Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="选择地区：" style="padding-bottom: 20px;">
              <Row>
                <Col span="6" offset="1">
                <Select v-model="queryMProvince" style="width:100%" placeholder="省份" @on-change="changeQueryMProvince">
                  <Option v-for="item in cityList" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
                </Col>
                <Col span="6" offset="1">
                <Select v-model="queryMCity" style="width:100%" placeholder="城市">
                  <Option v-for="item in cities" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
                </Col>
                <Col span="7" offset="1">
                <Button type="primary" @click="findTheMap">查找</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="项目数量：" style="padding-bottom: 20px;">
              <p>{{mapProjectNum}}个</p>
            </FormItem>
          </Form>
          </Col>
        </Row>
      </Card>
    </card>
    <Modal v-model="infoModel" width="700" title="项目流程单" :mask-closable="false" :styles="{top: '20px',width: '700px',height:'90%',overflowY:'scroll'}">
      <p slot="title">
        <Row style="padding-bottom: 10px" :gutter="32">
          <Col span="2">
          <h4>项目流程单</h4>
          </Col>
          <Col span="2" style="color:#999" @click.native="isShow = true"> 返回>>
          </Col>
        </Row>
      </p>
      <table width="100%" cellpadding="0" cellspacing="0" border="1">
        <tr>
          <th colspan="4">项目流程单</th>
        </tr>
        <tr>
          <th>流程</th>
          <th>操作</th>
          <th>操作记录</th>
          <th>功能</th>
        </tr>
        <tr>
          <td rowspan="2" width="25%">创建项目</td>
          <td width="25%">保存</td>
          <td width="25%">2018-07-31 9:30</td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printProject" :Project_id="routerId"></PrintButton>
            <ButtonShow style="display:inline-block" rName="createProgram" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="2" width="25%">资料收集</td>
          <td width="25%">保存</td>
          <td width="25%"> </td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printCollect" :Project_id="routerId"></PrintButton>
            <ButtonShow style="display:inline-block" rName="dataCollection" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="2" width="25%">现场勘探</td>
          <td width="25%">保存</td>
          <td width="25%"> </td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printSurver" :Project_id="routerId">></PrintButton>
            <ButtonShow style="display:inline-block" rName="reconnaissanceTrip" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="2" width="25%">环境质量及监测</td>
          <td width="25%">保存</td>
          <td width="25%"></td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printMonitor" :Project_id="routerId">></PrintButton>
            <ButtonShow style="display:inline-block" rName="environmentQuality" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="2" width="25%">报告编制及审核</td>
          <td width="25%">保存</td>
          <td width="25%">
          </td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printFormation" :Project_id="routerId">></PrintButton>
            <ButtonShow style="display:inline-block" rName="reportReview" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="2" width="25%">报告送审</td>
          <td width="25%">保存</td>
          <td width="25%">
          </td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printAudit" :Project_id="routerId"></PrintButton>
            <ButtonShow style="display:inline-block" rName="reportTria" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="2" width="25%">技术评估</td>
          <td width="25%">保存</td>
          <td width="25%">
          </td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printAppraise" :Project_id="routerId"></PrintButton>
            <ButtonShow style="display:inline-block" rName="technologyAssessment" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="2" width="25%">报告报批</td>
          <td width="25%">保存</td>
          <td width="25%">
          </td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printBatch" :Project_id="routerId"></PrintButton>
            <ButtonShow style="display:inline-block" rName="reportApproval" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="2" width="25%">报告公示</td>
          <td width="25%">保存</td>
          <td width="25%">
          </td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printPublicShow" :Project_id="routerId"></PrintButton>
            <ButtonShow style="display:inline-block" rName="reportPublicity" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
        <tr>
          <td rowspan="2" width="25%">报告存档</td>
          <td width="25%">保存</td>
          <td width="25%">
          </td>
          <td rowspan="2">
            <PrintButton style="display:inline-block" Url="print/printArchives" :Project_id="routerId"></PrintButton>
            <ButtonShow style="display:inline-block" rName="reportArchives" :Project_id="routerId"></ButtonShow>
          </td>
        </tr>
        <tr>
          <td>提交</td>
          <td></td>
        </tr>
      </table>
    </Modal>
    <Modal v-model="modalMap" title="公示" cancel-text="" width="500" @on-ok="ok">
      <p>项目名称：{{mapUpInfo.Project_name}}</p>
      <p>建设单位：{{mapUpInfo.Build_unit}}</p>
      <p style="margin-bottom:10px;">报告类型：{{mapUpInfo.Report_type}}</p>
    </Modal>
  </div>
</template>

<script>
  import {
    formatDate
  } from '../../libs/tools';
  import cityList from '../../libs/city.js';
  import * as VueGoogleMaps from 'vue2-google-maps';
  export default {
    data() {
      return {
        projectListLoading: true,
        cityList: cityList,
        cities: [],
        mapUpInfo: {},
        queryReportType: '',
        queryMProvince: '',
        queryMCity: '',
        // 地图弹框
        modalMap: false,
        // 地图点标记
        markers: [],
        //缩放级别
        zoomDefault: 4,
        // 地图中心城市
        center: {
          lat: 34,
          lng: 113
        },
        infoModel: false,
        mapProjectNum: 0,
        columns1: [{
            title: '序号',
            type: 'index2',
            width: 60,
            align: 'center',
            render: (h, params) => {
              return h('span', (params.index + 1) + (this.pageNum - 1) * 10);
            }
          },
          {
            title: "项目名称",
            key: "project_name",
            align: "center"
          },
          {
            title: "公司名称",
            key: "fullName",
            align: "center"
          },
          {
            title: "报告类型",
            key: "report_type",
            align: "center"
          },
          {
            title: "项目负责人",
            key: "perject_leader",
            align: "center"
          },
          {
            title: "创建日期",
            key: "perject_time",
            align: "center",
            render: (h, params) => {
              return h('div',
                formatDate(new Date(params.row.perject_time), 'yyyy-MM-dd')); /*这里的this.row能够获取当前行的数据*/
            }
          },
          {
            title: "结束日期",
            key: "ent_time",
            align: "center",
            render: (h, params) => {
              return h('div',
                params.row.ent_time ? formatDate(new Date(params.row.ent_time), 'yyyy-MM-dd') : ''); /*这里的this.row能够获取当前行的数据*/
            }
          },
          {
            title: "环评合同额",
            key: "contract_amount",
            align: "center"
          },
          {
            title: "操作",
            key: "id",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button", {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        console.log(params.row)
                        this.show(params.row.id);
                      }
                    }
                  },
                  "查看"
                )
              ]);
            }
          }
        ],
        projectList: [],
        mapList: {},
        pageNum: 1,
        proejctInfo: [],
        routerId: '',
        searchProject: '',
      };
    },
    // 地图组件
    components: {
      'googleMap': VueGoogleMaps.Map,
      'MapMarker': VueGoogleMaps.Marker
    },
    methods: {
      // 地图弹框确认按钮
      ok() {
        this.$Modal.remove();
      },
      mapModal(id) {
        axios.post('/projectInformation/mapInfo', {
          id: id
        }).then(res => {
          console.log(res)
          if (res._STATUS == 1) {
            this.modalMap = true
            this.mapUpInfo = res.projectInfo
          } else {
            this.$Message.error('发生错误');
          }
        }).catch(err => {
          console.log(err)
        })
      },
      findTheMap() {
        axios.post('/projectInformation/findProjectToMap', {
          mProvince: this.queryMProvince,
          mCity: this.queryMCity,
          report_type: this.queryReportType,
        }).then(res => {
            if(res.mapList){
                if (res.mapList.length >= 1) {
                    this.center = {
                        lat: parseFloat(res.mapList[0].lat),
                        lng: parseFloat(res.mapList[0].lng)
                    }
                }
                this.markers = []
                this.mapProjectNum = res.mapList.length;
                for (var i = 0; i < res.mapList.length; i++) {
                    var dat = res.mapList[i]
                    this.markers.push({
                        position: {
                            lat: parseFloat(dat.lat),
                            lng: parseFloat(dat.lng)
                        },
                        draggable: true,
                        enabled: true,
                        id: dat.id
                    });
                }
            }else{
                this.markers = []
                this.mapProjectNum=0
            }
        }).catch(err => {
          console.log(err);
        })
      },
      changeQueryMProvince(val) {
        this.queryMCity = '';
        for (var i = 0; i < this.cityList.length; i++) {
          if (val == this.cityList[i].name) {
            this.cities = this.cityList[i].cityList;
          }
        }
      },
      changeQueryReportType(value) {
        if (value == '全部') {
          this.queryReportType = '';
          this.queryMProvince = '';
          this.queryMCity = '';
          this.findTheMap();
        } else {
          this.queryReportType = value;
        }
      },
      findProject() {
        this.projectListLoading = true;
        axios.post('/projectInformation/findProject', {
            pageIndex: this.pageNum - 1,
            searchProject: this.searchProject,
          })
          .then((res) => {
            this.projectList = res.projectList;
            this.mapList = res.map;
            this.projectListLoading = false;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      handlePage(value) {
        this.pageNum = value
        this.findProject();
      },
      show(val) {
        this.infoModel = true;
        axios.post('/audit/findSubmitTime', {
            Project_id: val
          })
          .then((res) => {
            this.proejctInfo = res.data;
            console.log(res)
            this.routerId = val
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },
    mounted() {
      this.findProject();
      this.findTheMap();
    }
  };
</script>

<style scoped>
  #allmap {
    margin: auto;
    width: 95%;
    height: 500px;
    overflow: hidden;
  }
</style>